<template>
  <div class="mymapM">
    <!--捜索-->
    <div v-if="loading" class="loading">
      <van-loading type="spinner" />
    </div>
    <div class="search-box">
      <div class="search-postion">
        <span class="buts" @click="headleBack">返回</span>
        <van-field v-model="search_key" type="text" placeholder="输入关键字搜索" @input="changeprice"/>
        <span class="clear" v-if="search_key" @click="search_key ='' ">
          <van-icon color="#8f8f8f" name="clear" />
        </span>
        <span class="buts border_but" @click="keySearch()">捜索</span>
      </div>
    </div>
    <div class="con-box con-map" v-if="!search_key">
      <!--地图-->
      <div class="mapbox">
        <div class="map" id="container"></div>
        <div class="sign"></div>
      </div>
    </div>
    <div class="con-box" v-if="!search_key">
      <!--地址列表-->
      <div class="Hlist-box">
        <ul>
          <li v-for="(item, index) in lists" :key="index" @click="onAddressLi(item)" style="display: flex;justify-content: space-between;">
            <b style="align-items: center;display: flex;font-size: 14px;">
              <van-icon color="#4597fc" style="font-size: 18px;" name="location" />
              {{item.cityname}}
            </b>
            <div style="width: 75%;">
              <span>{{item.name}}</span>
              <p>{{item.address}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--捜索列表-->
    <div class="search-list" v-if="search_key">
      <ul>
        <li v-for="(item, index) in search_list" :key="index" @click="onSearchLi(item)" style="display: flex;justify-content: space-between;">
          <b style="align-items: center;display: flex;font-size: 14px;">
            <van-icon color="#4597fc" style="font-size: 18px;" name="location" />
            {{item.cityname}}
          </b>
          <div style="width: 75%;">
            <span>{{item.name}}</span>
            <p>{{item.address}}</p>
          </div>

        </li>
        <li v-if="noSearchShow">
          <p>暂无搜索结果</p>
        </li>
      </ul>
    </div>

  </div>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5cb232beffe42e35c66a2fcdc05092ef&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5cb232beffe42e35c66a2fcdc05092ef&plugin=AMap.Autocomplete"></script>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=5cb232beffe42e35c66a2fcdc05092ef&plugin=AMap.Geocoder"></script>
<script>
  import {
    getisRange
  } from '@/api/index'
  import { inputTipThrottle } from '@/utils/map'
  export default {
    props: {
      msg: {
        required: true,
        type: Array
      },
      city: {
        required: true,
        type: String
      },
    },
    watch: {
      msg: {
        immediate: true, // 这句重要
        handler(val) {
          setTimeout(() => {
            this.adMap(val)
          }, 1000)
        }
      },
      city: {
        immediate: true, // 这句重要
        handler(val) {
         this.city=val;
        }
      },

      search_key(newv, oldv) {
        if (newv == '') {
          this.search_list = []
          this.noSearchShow = false
          setTimeout(() => {
            this.adMap()
          }, 1000)
        }
      }
    },
    data() {
      return {
        center: this.msg, //经度+纬度
        city:this.city,
        search_key: '', //搜索值
        lists: [], //地点列表
        search_list: [], //搜索结果列表
        marker: '',
        loading: false,
        noSearchShow: false, //无搜索结果提示，无搜索结果时会显示暂无搜索结果
        // maptipsshow: false
      }
    },
    mounted() {
      var self = this;
      setTimeout(function () {
        self.adMap();
      }, 1000);
    },
    methods: {
      // 实时搜索问题
      changeprice(){
        let timer;
        let _this = this
        if(timer) clearTimeout(timer)
        timer= setTimeout( ()=>{
          _this.keySearch()
        },1000)
      },
      // H5根据经纬度查询地址是否在配送范围
      // /orderGroupLink/isRange
      adMap(item) {
        this.loading = true
        //初始化地图
        var map = new AMap.Map('container', {
          zoom: 14, //缩放级别
          center: item == undefined || item == '' ? this.center : item, //设置地图中心点
          resizeEnable: true, //地图初始化加载定位到当前城市
        })
        //获取初始中心点并赋值
        var currentCenter = map.getCenter() //此方法是获取当前地图的中心点
        this.center = [currentCenter.lng, currentCenter.lat] //将获取到的中心点的纬度经度赋值给data的center
        //创建标记
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(currentCenter.lng, currentCenter.lat) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        })
        // 将创建的点标记添加到已有的地图实例：
        map.add(this.marker)
        //根据地图中心点查附近地点，此方法在下方
        this.centerSearch()
        //监听地图移动事件，并在移动结束后获取地图中心点并更新地点列表
        var moveendFun = e => {
          // 获取地图中心点
          currentCenter = map.getCenter()
          this.center = [currentCenter.lng, currentCenter.lat]
          this.marker.setPosition([currentCenter.lng, currentCenter.lat]) //更新标记的位置
          //根据地图中心点查附近地点
        }
        //更新数据
        var centerSearch = () => {
          this.loading = true
          this.centerSearch()
        }
        // 绑定事件移动地图事件
        map.on('mapmove', moveendFun) //更新标记
        map.on('moveend', centerSearch) //更新数据
      },
      centerSearch() {
        AMap.service(['AMap.PlaceSearch'], () => {
          //构造地点查询类
          var placeSearch = new AMap.PlaceSearch({
            type: '汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息', // 兴趣点类别
            pageSize: 30, // 单页显示结果条数
            citylimit: true,
            extensions: 'all',
            pageIndex: 1, // 页码
            city: this.city, // 兴趣点城市
            autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          })
          //根据地图中心点查附近地点
          placeSearch.searchNearBy('', [this.center[0], this.center[1]], 200, (status, result) => {
            if (status == 'complete') {
              this.lists = result.poiList.pois //将查询到的地点赋值
              this.loading = false
            }
          })
        })
      },
      keySearch() {
        this.loading = true
        inputTipThrottle({
          city: this.city, // 兴趣点城市
          keyword: this.search_key || this.city
        }).then(addressList => {
          if (addressList && addressList.length) {
            this.noSearchShow = false
            this.search_list = addressList
          } else {
            this.noSearchShow = true
            this.search_list = []
          }
        }).finally(() => {
          this.loading = false
        })
      },
      onAddressLi(e) {
        //更新标记的位置
        this.$emit('callFather', e)
        this.marker.setPosition([e.location.lng, e.location.lat])
      },
      onSearchLi(e) {
        if(e.cityname == '株洲市' || e.cityname == '湘潭市') {
          e.cityname = '长沙市';
        }else if( e.cityname == '漳州市' ){
          e.cityname =  '厦门市'
        }
        this.$emit('callFather', e)
        this.marker.setPosition([e.location.lng, e.location.lat])
        // console.log(e.lng + '-' + e.lat)
        // this.center = [e.lng, e.lat]
        // console.log(this.center)
        this.search_key = ''
        // this.loading=true;
        setTimeout(() => {
          this.adMap()
        }, 1000)
      },
      headleBack() {
        this.msg = [];
        this.$emit('callFather');
      }
    },

  }
</script>
<style lang="scss" scoped>
  .con-map {
    height: 190px;
    width: 100%;
  }

  .van-overlay {
    z-index: 999 !important;

    .wrappermap {
      width: 330px;
      height: 135px;
      background: rgba(255, 255, 255, 1);
      border-radius: 14px;
      position: absolute;
      padding: 15px 12px 15px;
      box-sizing: border-box;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;

      .wrapper-maptop {
           a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5fed70;
            font-weight: 700;
            margin-top: 15px;
            .icon_service {
                font-size: 20px;
                margin-right: 4px;
                font-weight: 700
            }
        }
        div {
          text-align: center;
          line-height: 30px;
          font-size: 16px;

          &.tips {
            font-size: 18px;
          }
        }
      }

      .wrapper-mapbottom {
        img {
          width: 40px;
          height: 40px;
          margin: auto;
          display: block;
        }
      }
    }
  }

  .con-box {
    .mapbox {
      margin-bottom: 10px;
      position: fixed;
      z-index: 111;
      width: 100%;
      height: 180px;
      padding: 10px 0;
      background: #eceeee;

      .map {
        width: 100%;
        height: 180px;
      }
    }

    .Hlist-box {
      width: 96%;
      margin: 0 auto;

      background: #fff;
      border-radius: 5px;

      li {
        height: 40px;
        padding: 14px 22px;
        border-bottom: 1px solid #d9d9d9;
        display: flex;

        b {
          display: inline-block;

          // i {
          //   margin: 18px 18px 0 0;
          // }
        }

        div {
          width: 100%;
        }

        span {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 15px;
          display: inline-block;
          width: 90%;
        }

        p {
          margin-top: 10px;
          color: #a6a6a6;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 13px;
          width: 90%;
          padding: 0;
          margin: 0;

        }
      }
    }
  }

  .mymapM {
    .search-box {
      height: 48px;
      line-height: 48px;
      background: #fff;
      border-bottom: 1px solid #bfbec4;

      .search-postion {
        height: 48px;
        line-height: 48px;
        background: #fff;
        border-bottom: 1px solid #bfbec4;
        width: 100%;
        position: fixed;
        z-index: 2;
        display: flex;

        .van-cell {
          flex: 4;
          // height: 14px;
          padding: 16px 0;
          border: none;
          text-indent: 10px;
        }

        .clear {
          margin: 2px 6px;
        }

        .buts {
          width: 15%;
          text-align: center;
          display: inline-block;
          flex: 1;
        }

        .border_but {
          border-left: 1px solid #8f8f8f;
          height: 14px;
          line-height: 14px;
          margin: 17px 0;
        }
      }
    }

    .search-list {
      width: 96%;
      margin: 0 auto;
      margin-top: 10px;
      border-radius: 5px;
      background: #fff;

      li {
        height: 40px;
        padding: 14px 22px;
        border-bottom: 1px solid #d9d9d9;

        span {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 15px;
          display: inline-block;
          width: 90%;
        }

        p {
          margin-top: 10px;
          color: #a6a6a6;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 13px;
          width: 90%;
          padding: 0;
          margin: 0;
        }
      }
    }
  }

  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999;
  }
</style>
